<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_猜数字练习</title>
</head>
<body>
<    <meta charset="UTF-8">
<title>05_猜数字练习</title>
</head>
<body>
<h3>已生成一个1~100之间的随机数</h3>
<input type="text" placeholder="请输入你猜的数字">
<button onclick="guess()">点我验证</button>
<h4>小提示:<span></span></h4>

<script>
    //1.生成一个用来猜的随机数
    let x = parseInt(Math.random()*100)+1;
    console.log(x);
    //5.准备统计次数的变量
    var count = 0;
    //2.编辑猜数字的方法
    function guess() {
        //3.获取用户猜的数字
        let num = document.querySelector('input').value;
        //8.优化:对拿到的输入数据进行校验
        // 一对斜杠里面的就是正则表达式
        // ^表示开头, $表示结尾, +表示至少出现一次 \d表示数字
        if(!/^\d+$/.test(num)){
            alert('请输入数字!');
            return;
        }
        //4.获取用来展示结果的span元素
        let spanE = document.querySelector('span');
        //6.每猜一次,次数+1
        count++;
        //7.猜数字
        if(num>x){
            spanE.innerHTML = '猜大了';
        }else if(num<x){
            spanE.innerHTML = '猜小了';
        }else{
            spanE.innerHTML = '恭喜你用了'+count+'次就猜对了!';
        }
    }
</script>
</body>
</html>